<template>
  <view class="custom-nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
    <view class="nav-content">
      <view v-if="showBack" class="left-area" @click="goBack">
        <text class="back-symbol">返回</text>
      </view>
      <text class="title">{{ title }}</text>
      <view class="right-area">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
import { computed } from 'vue'
export default {
  name: 'CustomNavBar',
  props: {
    title: {
      type: String,
      default: ''
    },
    showBack: {
      type: Boolean,
      default: true
    }
  },
  setup() {
    const statusBarHeight = computed(() => {
      return uni.getSystemInfoSync().statusBarHeight || 20
    })

    const goBack = () => {
      uni.navigateBack({
        delta: 1,
        fail() {
          // 如果无法返回，则跳转首页
          uni.switchTab({ url: '/pages/index/index' })
        }
      })
    }

    return {
      statusBarHeight,
      goBack
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #35495E;

  .nav-content {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;

    .left-area {
      position: absolute;
      left: 16px;
      height: 100%;
      display: flex;
      align-items: center;

      .back-symbol {
        font-size: 15px;
        color: #fff;
        font-weight: bold;
        padding-right: 8px;
      }
    }

    .title {
      flex: 1;
      text-align: center;
      color: #FFFFFF;
      font-size: 16px;
      font-weight: 500;
    }

    .right-area {
      position: absolute;
      right: 16px;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
}
</style>
